/* ============================================
   ESTILOS DEL HEADER COMPLETO
   Psicología de la Religión
   Extraídos del index.html (página de inicio)
   
   NOTA: Usa !important en propiedades clave para
   predominar sobre los CSS post-específicos de
   Elementor (post-767, post-6049, post-5690, etc.)
   ============================================ */

/* -----------------------------------------------
   1. SECCIÓN HEADER PRINCIPAL (Elementor)
   Selectores genéricos que aplican a TODAS las páginas
   ----------------------------------------------- */
.elementor-top-section[data-element_type="section"]:first-child {
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  background-image: url('../wp-content/uploads/2024/03/designer-1.jpeg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.elementor-top-section[data-element_type="section"]:first-child > .elementor-container {
  max-width: 806px !important;
  min-height: 60vh !important;
}

.elementor-top-section:first-child .elementor-background-slideshow__slide__image {
  background-position: center center !important;
}

.elementor-top-section:first-child > .elementor-background-overlay {
  opacity: 0 !important;
  display: none !important;
}

/* Shape divider (montañas) en la parte inferior del header */
.elementor-top-section:first-child > .elementor-shape-bottom svg {
  width: calc(201% + 1.3px) !important;
  height: 192px !important;
}

.elementor-shape {
  direction: ltr;
  left: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.elementor-shape-bottom {
  bottom: -1px;
}

.elementor-shape svg {
  display: block;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  width: calc(100% + 1.3px);
}

.elementor-shape .elementor-shape-fill {
  fill: #fff !important;
  transform: rotateY(0deg);
  transform-origin: center;
}

/* -----------------------------------------------
   2. LOGO DEL SITIO
   Selectores genéricos para el logo en header
   ----------------------------------------------- */
/* Logo column: primera columna interna del header */
.elementor-top-section:first-child .elementor-inner-section .elementor-inner-column:first-child > .elementor-widget-wrap {
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
}

.elementor-top-section:first-child .elementor-inner-section .elementor-inner-column:first-child > .elementor-element-populated {
  margin: 0 !important;
}

/* Logo image container */
.elementor-top-section:first-child .elementor-widget-image > .elementor-widget-container {
  margin: -45px -21px -19px -19px !important;
}
.elementor-top-section:first-child .elementor-widget-image > .elementor-widget-container,
.elementor-top-section:first-child .elementor-widget-image,
.elementor-top-section:first-child .elementor-widget-image img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* -----------------------------------------------
   3. MENÚ DE NAVEGACIÓN (QuadMenu)
   ----------------------------------------------- */

/* Contenedor principal del menú */
.quadmenu-sticky-wrapper.quadmenu-default_theme {
  background-color: rgba(66, 110, 134, 0.52) !important;
}

#quadmenu.quadmenu-default_theme {
  background-color: rgba(66, 110, 134, 0.52) !important;
  color: #aaaaaa !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-weight: normal !important;
  font-size: 11px !important;
  letter-spacing: inherit !important;
}

/* Gradiente de fondo del menú */
#quadmenu.quadmenu-default_theme.quadmenu-background-gradient {
  background: linear-gradient(17deg, rgba(66, 110, 134, 0.52) 0, #000000 90%) !important;
}

/* Links del menú nivel 0 */
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav > li.quadmenu-item > a,
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav > li.quadmenu-item > form {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 11px !important;
  font-weight: normal !important;
  letter-spacing: inherit !important;
}

/* Links del dropdown */
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav .quadmenu-dropdown-menu li.quadmenu-item > a {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 11px !important;
  font-weight: normal !important;
  letter-spacing: inherit !important;
}

/* Títulos dentro del dropdown */
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav .quadmenu-dropdown-menu .quadmenu-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 11px !important;
}

/* Collapse del menú */
.quadmenu-navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
}

/* -----------------------------------------------
   4. NAVEGACIÓN PRINCIPAL (Tema CoverNews)
   ----------------------------------------------- */
body .main-navigation {
  background: #426e86 !important;
}

.main-navigation .menu ul > li > a {
  display: block;
  padding: 13px 40px 13px 10px;
  font-size: 13px;
  margin-top: -6px;
}

.main-navigation .menu ul ul {
  background: #426e86 !important;
}

/* -----------------------------------------------
   5. BRANDING DEL SITIO
   ----------------------------------------------- */
.site-title a,
.site-header .site-branding .site-title a:visited,
.site-header .site-branding .site-title a:hover,
.site-description {
  color: #ffffff !important;
}

.site-branding .site-title {
  font-size: 26px;
}

.site-title a {
  color: #426e86 !important;
  font-size: 30px !important;
}

/* Newsment: título grande */
.header-layout-3 .site-header .site-branding .site-title,
.site-branding .site-title {
  font-size: 100px;
  text-transform: uppercase;
}

/* Banner del header */
.header-image-full .masthead-banner.data-bg {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #b0d9c8 !important;
  padding: 65px 0 !important;
}

.masthead-banner {
  padding: 0px 0;
}

.masthead-banner .site-branding {
  text-align: left;
  padding-right: 0;
}

/* Header layout 3 */
.header-layout-3 .masthead-banner .site-branding {
  text-align: center;
}

.header-layout-3 .site-header .site-branding .site-title {
  font-size: 100px;
}

/* -----------------------------------------------
   6. SECCIÓN INFERIOR DEL HEADER
   (Centro de Estudios / redes sociales)
   Selectores genéricos con !important
   ----------------------------------------------- */
/* Sección con fondo degradado azul */
.elementor-section[data-element_type="section"] .elementor-background-overlay {
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Heading "Centro de Estudios en Psicología de la Religión" */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif !important;
  font-weight: var(--e-global-typography-primary-font-weight, 600) !important;
  color: var(--e-global-color-primary, #3DBD51) !important;
}

/* -----------------------------------------------
   7. RESPONSIVE HEADER
   ----------------------------------------------- */
@media only screen and (max-width: 640px) {
  .header-layout-3 .site-header .site-branding .site-title,
  .site-branding .site-title {
    font-size: 60px !important;
  }
}

@media only screen and (max-width: 375px) {
  .header-layout-3 .site-header .site-branding .site-title,
  .site-branding .site-title {
    font-size: 50px !important;
  }
}

@media only screen and (max-width: 320px) {
  .main-navigation.aft-sticky-navigation span.af-mobile-site-title-wrap .site-title {
    font-size: 26px !important;
    line-height: 55px !important;
  }
}

/* Responsive Elementor header - genérico para todas las páginas */
@media (max-width: 880px) {
  .elementor-top-section[data-element_type="section"]:first-child > .elementor-container {
    min-height: 95vh !important;
  }
}

@media (max-width: 767px) {
  .elementor-top-section[data-element_type="section"]:first-child > .elementor-container {
    min-height: 45vh !important;
  }

  .elementor-top-section:first-child > .elementor-shape-bottom svg {
    width: calc(300% + 1.3px) !important;
    height: 104px !important;
  }

  /* Logo column mobile */
  .elementor-top-section:first-child .elementor-inner-section .elementor-inner-column:first-child {
    width: 30% !important;
  }

  .elementor-top-section:first-child .elementor-inner-section .elementor-inner-column:first-child > .elementor-element-populated {
    margin: -16px 0px 0px 0px !important;
  }

  /* Logo image mobile */
  .elementor-top-section:first-child .elementor-widget-image > .elementor-widget-container {
    margin: 0px -23px -8px -21px !important;
  }

  /* Menu column mobile */
  .elementor-top-section:first-child .elementor-inner-section .elementor-inner-column:last-child {
    width: 70% !important;
  }
}

@media (min-width: 768px) {
  /* Logo column desktop */
  .elementor-top-section:first-child .elementor-inner-section .elementor-inner-column:first-child {
    width: 20% !important;
  }

  /* Menu column desktop */
  .elementor-top-section:first-child .elementor-inner-section .elementor-inner-column:last-child {
    width: 80% !important;
  }
}

/* -----------------------------------------------
   8. SLIDESHOW DE FONDO DEL HEADER (Elementor)
   Configuración del slideshow con Ken Burns
   ----------------------------------------------- */
/* 
   data-settings del header:
   - background_background: slideshow
   - Imágenes: designer-1.jpeg, Biblia.webp, MANO.webp
   - transition_duration: 200ms
   - slide_duration: 5000ms
   - slide_transition: fade
   - ken_burns: yes (zoom in)
   - lazyload: yes
   - loop: yes
*/